昨天改好base的共用元件
現在最裡面是control
這樣base元件上面可以新增檢核的部分
那先在base-element裡面寫一個getError()
去取出control裡面的error
並且去解析error裡面的訊息決定顯示的內容

getError()
    {
        let errors = this.control.errors;
        if (errors)
        {
            if (errors['required'])
                return '必填';
            else if (errors['maxlength'])
                return '長度不可超過' + errors['maxlength']['requiredLength'];
            else
                return '';
        } else
        {
            return '';
        }
    }

我們這邊目前寫了必填跟長度檢核
之後如果還有其他的要寫 再加上去
或者可以想其他機制去讓這個地方變動態

html面板上現在增加一區顯示錯誤訊息的span
當getError有值的時候顯示錯誤訊息
另外增加如果有錯誤就紅框
以下已base-text為例

<div>
  <input
    type="text"
    placeholder="{{ fieldSetting.placeholder || '文字輸入框' }}"
    [formControl]="control"
    [ngClass]="{ 'is-invalid': control.invalid && control.touched }"
  />
  <span *ngIf="getError()" style="color: red">{{ getError() }}</span>
</div>

檢核的部分初步架構就是這樣
看來還有一些部分可以擴充
就是錯誤訊息如果想要客製
那可能需要再另外寫到設定檔裡
還有如果是使用自定義的檢核
那要怎麼套用
另外明天會先來寫分頁以及表單檢核阻止換頁這件事
今天原本還想多補完一點程式
不過回家的路上碰到一點事情
沒甚麼心情繼續改程式
我們就明天繼續吧
今日程式:day13